<template>
	<view class="container">
		<view class="header">
			<uni-icons type="left-nav" class="back-icon" color="#ffffff"></uni-icons>
			<text class="title">预警列表</text>
		</view>
		<view class="selectType">
			<text class="label">所在场区</text>
			<uni-data-select v-model="value" :localdata="range" @change="change"></uni-data-select>
		</view>
		<view class="selectType">
			<text class="label">设备类型</text>
			<uni-data-select v-model="value" :localdata="range" @change="change"></uni-data-select>
		</view>
		<view class="selectType">
			<text class="label">录入时间</text>
			<timePicker class="time-picker"></timePicker>
		</view>
		<view style="border-bottom: 1rpx solid #000000; width: 100%; padding-top: 20rpx;"></view>

		<view class="content">
			<contentShow :data="deviceData[0]"></contentShow>
			<contentShow :data="deviceData[1]"></contentShow>
			<contentShow :data="deviceData[2]"></contentShow>
		</view>


	</view>
</template>

<script>
	import contentShow from './contentShow/contentShow.vue';
	import timePicker from './contentShow/timePicker.vue'
	export default {
		components: {
			contentShow,
			timePicker
		},
		data() {
			return {
				value: 0,
				range: [{
						value: 0,
						text: "全部"
					},
					{
						value: 1,
						text: "药品"
					},
					{
						value: 2,
						text: "耗材"
					},
					{
						value: 3,
						text: "设施"
					},
					{
						value: 4,
						text: "兽药"
					},
					{
						value: 5,
						text: "疫苗"
					},
					{
						value: 6,
						text: "饲料"
					}
				],
				startDate: '',
				endDate: '',
				deviceData: [{
						name: '设备A',
						id: '001',
						status: '待处理',
						location: '场区A',
						home: '母猪01',
						reason: '温度过低',
						time: '2024-07-22'
					},
					{
						name: '设备B',
						id: '002',
						status: '已处理',
						location: '场区B',
						home: '母猪02',
						reason: '湿度过高',
						time: '2024-07-23'
					},
					{
						name: '设备C',
						id: '003',
						status: '待处理',
						location: '场区C',
						home: '母猪03',
						reason: '电压过低',
						time: '2024-07-24'
					}
				]
			};
		},
		methods: {
			change(e) {
				console.log("e:", e);
			},
			changeLog(e) {
				console.log("Date changed:", e);
			},
		}
	}
</script>

<style lang="scss" scoped>
	.header {
		width: 100%;
		height: 100rpx;
		background-color: #0000ff;
		display: flex;
		align-items: center;
		justify-content: center;
		position: relative;
	}

	.back-icon {
		position: absolute;
		left: 20rpx;
		font-size: 40rpx;
		color: #ffffff;
	}

	.title {
		font-size: 36rpx;
		color: #ffffff;
	}

	.selectType {
		display: flex;
		align-items: center;
		padding: 10rpx 30rpx;
		background-color: #f5f5f5;
		flex-wrap: nowrap;
	}

	.label {
		font-size: 28rpx;
		margin-right: 10rpx;
		color: #333;
		white-space: nowrap;
	}

	.time-picker {
		flex: 1;
		font-size: 28rpx;
	}

	/* 调整时间选择框的宽度 */
	.time-picker uni-data-select {
		width: auto;
		min-width: 150rpx;
		/* 设置宽度 */
	}

	.content {
		width: 100%;
		padding: 0 30rpx;
	}

	/* 为每个 contentShow 组件添加间距 */
	.content>contentShow {
		margin-bottom: 20rpx;
	}
</style>